<template>
	<view v-if="value" class="share-popup" @click="closePopup">
		<view
			class="share-tips"
			:style="{ top: `calc(${commonStore.statusBarHeight + commonStore.navbarHeight}px + 24rpx)` }"
		>
			<image :src="imgBaseUrl + 'share-arrow.png'" class="share-arrow" />
			<view v-if="shareTypes.includes('wx')">请选择右上角“...”发送给微信好友</view>
			<view v-if="shareTypes.includes('timeline')" class="mt-24">请选择右上角“...”分享至微信朋友圈</view>
			<view v-if="shareTypes.includes('link')" class="mt-24">请选择右上角“...”复制链接</view>
		</view>
		<view class="popup-bottom-container" @click.stop>
			<view class="popup-close" @click="closePopup"></view>
			<view class="pt-32 pb-48 fs-36 font-bold text-center">分享</view>
			<view class="share-types">
				<block v-for="(type, index) in shareTypes">
					<view v-if="type == 'wx'" :key="index" class="type-item">
						<image :src="imgBaseUrl + 'share-wx.png'" class="icon-96" />
						<text class="mt-16">微信好友</text>
					</view>
					<view v-if="type == 'timeline'" class="type-item">
						<image :src="imgBaseUrl + 'share-timeline.png'" class="icon-96" />
						<text class="mt-16">朋友圈</text>
					</view>
					<view v-if="type == 'link'" class="type-item">
						<image :src="imgBaseUrl + 'share-link.png'" class="icon-96" />
						<text class="mt-16">复制链接</text>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import useCommonStore from "@/store/common"

const emit = defineEmits(["update:value"])
const imgBaseUrl = inject("imgBaseUrl")
const commonStore = useCommonStore()
defineProps({
	value: Boolean,
	shareTypes: {
		type: Array,
		default: ["wx", "timeline", "link"],
	},
})
const closePopup = () => {
	emit("update:value", false)
}
</script>
<style lang="scss" scoped>
.share-popup {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99999;
	.share-tips {
		position: absolute;
		left: 0;
		right: 0;
		color: $c-white;
		padding-top: 48rpx;
		text-align: center;
		.share-arrow {
			position: absolute;
			right: 28rpx;
			top: 0;
			width: 76rpx;
			height: 62rpx;
		}
	}
	.popup-bottom-container {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: $c-white;
		padding-bottom: 116rpx;
		.share-types {
			display: flex;
			.type-item {
				padding: 12rpx 0;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
	}
}
</style>
